/**
 * 考生详情
 */

<template>
  <div class="body">
    <el-card class="card">
      <!-- 基本信息 -->
      <el-descriptions
        title="基本信息"
        direction="horizontal"
        :column="2"
        border
      >
        <el-descriptions-item label="姓名">
          {{ form.studentName }}
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          {{ form.gender === "0" ? "男" : "女" }}
        </el-descriptions-item>
        <el-descriptions-item label="学校">
          {{ form.colleageName }}
        </el-descriptions-item>
        <el-descriptions-item label="年级"
          >{{ form.className }}
        </el-descriptions-item>
        <el-descriptions-item label="班级"
          >{{ form.className }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 考试记录 -->
      <div class="cardMian">
        <h3>考试记录</h3>
        <el-table :data="recordList" border>
          <el-table-column
            type="index"
            label="序号"
            width="70"
          ></el-table-column>
          <el-table-column prop="examPaper" label="考试期次"></el-table-column>
          <el-table-column
            prop="examTime"
            label="考试时间"
            width="280"
          ></el-table-column>
          <el-table-column prop="answerTime" label="答卷时间"></el-table-column>
          <el-table-column prop="status" label="参考状态">
            <template slot-scope="scope">
              {{ scope.row.status === "0" ? "正常" : "缺考" }}
            </template>
          </el-table-column>
          <el-table-column prop="score" label="分数"></el-table-column>
          <el-table-column
            prop="isQualified"
            label="是否及格"
          ></el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getDetailApi } from "@/api/testManagement/examinee";
export default {
  data() {
    return {
      form: {
        studentName: "",
        className: "",
        colleageName: "",
        gender: "",
        studentId: "",
      },
      recordList: [],
    };
  },
  mounted() {
    let { id } = this.$route.query;
    if (id) {
      this.getDetail(id);
    }
  },

  methods: {
    async getDetail(id) {
      let res = await getDetailApi({ id });
      this.form = res.data.examineeVo;
      this.recordList = res.data.examineeVoList;
    },
  },
};
</script>
<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  padding: 0 15px 15px;
  min-width: 100vh;
  .card {
    width: 100%;
    height: 100%;
  }

  .cardMian {
    h3 {
      font-size: 16px;
      font-weight: 700;
      padding: 20px 0;
    }
  }

  ::v-deep .el-input__inner {
    height: 30px;
  }

  ::v-deep .el-descriptions {
    margin-top: 12px;
  }
}
</style>
